<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>仓储物流</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/mobileSelect.css">
    <style>
        .van-tabs__line {
            width: .22rem !important;
        }

        .right>div:first-child {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div v-if="warehouseList&&warehouseList.length>0">
            <div class="logistics-item flex-x-s" v-for="(item,index) in warehouseList" @click="goPage(0,item)">
                <div class="left-mainImg">
                    <img v-lazy="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt="">
                    <img class="sign" :src="item.type==1?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/czh.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/hzc.png'" alt="">
                </div>
                <div class="right">
                    <div>{{item.title}}</div>
                    <div class="area">
                        <div>{{item.departureCityName}}</div>
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/arrival_arrow.png" alt="">
                        <div>{{item.destinationCityName}}</div>
                        <div style="margin-left: .1rem;">{{item.distance | filterDistance}}</div>
                    </div>
                    <div class="distance">距离：{{item | getMinDistance | filterDistance}}</div>
                    <div class="r-end">
                        <span v-if="item.freight === null || item.freight === ''">
                            面议
                        </span>
                        <span v-else>
                            <span class="money" v-if="item.price<10000">¥</span>{{item.freight}} {{item.freightUnitName}}
                        </span>
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/kf.png" alt="" @click.stop="gIMCommon(item.userId)">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/phone.png" alt="" @click.stop="call(item.phone)">
                    </div>
                </div>
            </div>
            <div class="no-more" v-if="!hasNext">没有更多了</div>
        </div>
        <div v-else class="collect-empty">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
            <div>暂无内容～</div>
        </div>
        <div class="peijianshangcheng">
            <div class="release" id="editPage">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
        </div>
        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'77%' }">
            <div class="screen-condition">
                <div class="screen-condition-space" v-for="(condition,index) in conditionList" :key="index">
                    <div class="condition-title">{{condition.typeName}}</div>
                    <div class="screen-condition-list flex-x-s flex-wrap">
                        <div class="screen-condition-item" v-for="(conditionItem,idx) in condition.list" :key="idx"
                            @click="selectCondition(index,idx,conditionItem)" :class="{active:conditionItem.selected}">
                            {{conditionItem.val}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="screen-confirm" @click="confirm">确定</div>
        </van-popup>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script src="../../script/mobileSelect.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            api.addEventListener({
                name: 'showFilterBox'
            }, function (ret, err) {
                if (ret.value.active == 0) {
                    vm.select(ret.value.index);
                }
            });
            vm = new Vue({
                el: '.app',
                data: function () {
                    var title = "0";
                    return {
                        warehouseList: [],
                        show: false,
                        conditionIndexObj: {
                            cityIndex: 0,
                            typeIndex: 0,
                            goodsTypeIndex: 0,
                            moreIndex: 0
                        },
                        conditionList: [],
                        conditionName: '',
                        conditionCurIndex: 0,
                        wxIndex: 0,
                        listLogistics: [],
                        filterArr: [],
                        queryInfo: {
                            type: title,
                            departureAreaIds: [],
                            destinationAreaIds: [],
                            goodsTypeIds: [],
                            ids: [],
                            keyword: "",
                            location: "",
                            maxWeight: "",
                            minWeight: "",
                            orderBy: "",
                            types: "",
                            pageNum: 1,
                            pageSize: 10,
                            status: 1
                        },
                        objectOption: {
                            listFromLocation: [],
                            listToLocation: [],
                            listType: [],
                            listGoods: [],
                            listMore: [] // 更多
                        },
                        listGoodsType:[],
                        listType: [{
                            typeName: '类型',
                            list: [{
                                id: "",
                                val: "全部",
                                selected: true
                            }, {
                                id: 0,
                                val: "货找车",
                                selected: false
                            }, {
                                id: 1,
                                val: "车找货",
                                selected: false
                            }]
                        }],
                        listMore: [{
                            typeName: '重量',
                            list: [{
                                id: "",
                                val: "全部",
                                minWeight: '',
                                maxWeight: '',
                                selected: true
                            }, {
                                id: 0,
                                val: "0-50吨",
                                minWeight: 0,
                                maxWeight: 50,
                                selected: false
                            }, {
                                id: 1,
                                val: "50-100吨",
                                minWeight: 50,
                                maxWeight: 100,
                                selected: false
                            }, {
                                id: 1,
                                val: "100吨以上",
                                minWeight: 100,
                                maxWeight: '',
                                selected: false
                            }]
                        }, {
                            typeName: '排序',
                            list: [{
                                val: "全部",
                                orderBy: '',
                                selected: true
                            }, {
                                val: "距离由近及远",
                                orderBy: 'DISTANCE_ASC',
                                selected: false
                            }, {
                                val: "更新时间最新",
                                orderBy: 'UPDATE_TIME_DESC',
                                selected: false
                            }]
                        }],
                        authStatus:{
                            merchant:-1,
                            personal:-1
                        },
                        hasNext:false
                    };
                },
                filters: {
                    getMinDistance: function (item) {
                        var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}

                        // var location = $api.getStorage('location_home')
                        location = JSON.parse(location).location.split(',')
                        var departureLocation = item.departureLocation;
                        if (departureLocation == null) return 0;
                        var distance = getDistance(departureLocation.lat, departureLocation.lon,
                            location[1], location[0]);
                        return distance;
                    },
                    filterDistance(val) {
                        val = val / 1000
                        if (val > 500) {
                            return '500km以上'
                        } else {
                            return val.toFixed(1) + 'km'
                        }
                    }
                },
                mounted: function () {
                    // var location = $api.getStorage('location_home') || {}
                    var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}

                    this.queryInfo.location = JSON.parse(location).location
                    this.getListOptions(3);
                    this.initLogistically();
                    this.getAuthorizationStatus()
                    this.initMob()
                },
                methods: {
                    initMob(){
                        var vm = this;
                        new MobileSelect({
                            trigger: '#editPage',
                            wheels: [{data: [{id:1,value:'货找车'}, {id:2,value:'车找货'}]}],
                            triggerDisplayData: false,
                            position: 0,
                            callback: function (indexArr, data) {
                                vm.goEditPage(data[0].value)
                            },
                            onShow(){
                                api.setFrameAttr({
                                    name: api.frameName,
                                    bounces: false
                                });
                            },
                            onHide(){
                                api.setFrameAttr({
                                    name: api.frameName,
                                    bounces: true
                                });
                            }
                        });
                    },
                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function(ret) {
                            vm.authStatus.merchant = ret.data.merchant
                            vm.authStatus.personal = ret.data.personal
                        })
                    },
                    getListOptions: function (type) {
                        var vm = this;
                        release('getListOptions')(type, function (ret) {
                            ret.data.unshift({
                                id: "",
                                val: '全部'

                            });
                            ret.data.map((item,index)=>{
                                item.selected = index == 0? true:false
                            })
                            vm.listGoodsType = [{
                                typeName:'货物类型',
                                list:ret.data
                            }];
                        });
                    },
                    /**
                     * 初始化物流列表
                     */
                    initLogistically: function () {
                        var vm = this;
                        vm.queryInfo.type = vm.title;
                        console.log('物流：',JSON.stringify( vm.queryInfo))
                        index.logistically("getLogisticsList")(vm.queryInfo, function (ret) {
                            let resData = ret.data.list;
                            console.log('物流：',JSON.stringify(resData));
                            resData.map(item => {
                                if(item.imageUrl){
                                    item.imageUrl = item.imageUrl.replace(/_[0-9x]+(\.[a-z]{3})$/, '$1')
                                }
                            })
                            const kfUrlMap = new Map();
                            vm.hasNext = ret.data.hasNext;
                            if (vm.queryInfo.pageNum == 1) {
                                vm.warehouseList = resData;
                            } else {
                                vm.warehouseList = vm.warehouseList.concat(resData);
                            }
                        });
                    },
                    select(index) {
                        if (index == 0 || index == 1) {
                            this.conditionIndexObj.cityIndex = index;
                            api.openWin({
                                name: 'area_select_win',
                                url: '../select/area_select_win.html',
                                bounces: false,
                                pageParam: {
                                    key: 'value',
                                    title: "用工招聘"
                                }
                            });
                            return false;
                        } else if (index == 2) {
                            this.conditionList = JSON.parse(JSON.stringify(this.listType));
                        } else if (index == 3) {
                            this.conditionList = JSON.parse(JSON.stringify(this.listGoodsType)) ;
                        } else if (index == 4) {
                            this.conditionList = JSON.parse(JSON.stringify(this.listMore));
                        }
                        this.wxIndex = index;
                        this.show = true;
                    },
                    confirm() {
                        if (this.wxIndex == 2) {
                            this.listType = this.conditionList
                        } else if (this.wxIndex == 3) {
                            this.listGoodsType = this.conditionList
                        } else if (this.wxIndex == 4) {
                            this.listMore = this.conditionList
                        }
                        this.listType[0].list.map(item=>{
                            if(item.selected){
                                this.queryInfo.types = [item.id]
                            }
                        })
                        this.listGoodsType[0].list.map(item=>{
                            if(item.selected){
                                this.queryInfo.goodsTypeIds = [item.id];
                            }
                        })
                        this.listMore[0].list.map(item=>{
                            if(item.selected){
                                this.queryInfo.minWeight = item.minWeight
                                this.queryInfo.maxWeight = item.maxWeight
                            }
                        })
                        this.listMore[1].list.map(item=>{
                            if(item.selected){
                                this.queryInfo.orderBy = item.orderBy
                            }
                        })
                        this.show = false;
                        this.warehouseList = []
                        this.queryInfo.pageNum = 1
                        vm.initLogistically();
                    },
                    selectCondition(index, idx, conditionItem) {
                        this.conditionList.map((item, conditionIndex) => {
                            if (index == conditionIndex) {
                                item.list.map((it, listIdx) => {
                                    it.selected = idx == listIdx ? !it.select : false
                                })
                            }
                        })
                    },
                    back: function () {
                        api.closeWin();
                    },
                    goPage: function (type, item) {
                        api.openWin({
                            name: 'warehouse_logistics_detail_win',
                            url: './warehouse_logistics_detail_win.html',
                            bounces: false,
                            pageParam: {
                                type: type,
                                status: item.type,
                                id: item.id,
                                title: item.title
                            }
                        });
                    },
                    goEditPage: function (editName) {
                        if (!checkToken()) return false;
                        if(vm.authStatus.merchant == 1 || vm.authStatus.personal == 1){
                            api.openWin({
                                name: 'release_edit_win',
                                url: '../release/release_edit_win.html',
                                bounces: false,
                                pageParam: {
                                    editName: editName,
                                    status: 'edit'
                                }
                            });
                        }else{
                            toastMiddle('认证通过后才可进行发布')
                        }
                    },
                    call: function (phone) {
                        if (!checkToken()) return false;
                        phone = phone.split(',')
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: phone
                        }, function (ret, err) {
                            if (ret.buttonIndex > phone.length) return false;
                            api.call({
                                type: 'call_type',
                                number: phone[ret.buttonIndex - 1]
                            });
                        });
                    }
                }
            });
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.warehouseList = []
                vm.queryInfo.pageNum = 1;
                vm.initLogistically();
            });
            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function (ret, err) {
                if (vm.hasNext) {
                    vm.queryInfo.pageNum++;
                    vm.initLogistically();
                }
            });
            api.addEventListener({
                name: 'filterDistrict'
            }, function (ret) {
                if (vm.conditionIndexObj.cityIndex == 0) {
                    vm.queryInfo.departureAreaIds = ret.value.city.id > -1 ? [ret.value.city.id] : [];
                } else if (vm.conditionIndexObj.cityIndex == 1) {
                    vm.queryInfo.destinationAreaIds = ret.value.city.id > -1 ? [ret.value.city.id] : [];
                }
                vm.initLogistically();
            });
            api.addEventListener({
                name: 'login'
            }, function(ret, err) {
                vm.getAuthorizationStatus()
            })
        };
    </script>
</body>

</html>
